<template>

	<view class="container">
		<view class="img">
			<image class="imglist" :src="data.imageUrl" mode="aspectFill"></image>
		</view>
		<view class="productInfo">
			<view class="price">
				<text>券后:</text>
				<text class="zero" v-if="data.isZero">
					<del>¥{{data.price}}</del>
					<text style="margin-left:10px">¥0.00</text>
				</text>
				<text v-else>¥{{data.price}}</text>
			</view>
			<view class="inventory">库存:{{data.inventory}}</view>
		</view>
		<view class="desc">
			{{data.description}}
		</view>
		<view class="goods-carts">
			<uni-goods-nav :options="options" :fill="true" :button-group="buttonGroup" @click="onClick"
				@buttonClick="buttonClick" />
		</view>
	</view>

</template>

<script setup>
	import { onMounted, ref, getCurrentInstance } from "vue"
	import { onLoad, onShow } from "@dcloudio/uni-app"
	import * as api from "@/api/product.js"

	let data = ref({})

	//获取商品详情

	let getDetail = async (product_id) => {
		uni.showLoading({
			title: "正在加载"
		})
		try {
			let res = await api.getProductApi({ product_id });
			data.value = res.data[0]
			uni.hideLoading()
		} catch (e) {
			console.log(e.toString())
		}
	}



	// #ifdef APP-PLUS
	onShow(() => {
		// console.log(getApp().globalData.productInfo);
		let p = getApp().globalData.productInfo
		getDetail(p.product_id)
	})
	//#endif

	//#ifndef APP-PLUS
	onShow(() => {
		setTimeout(() => {
			let page = getCurrentPages();
			let currPage = page[page.length - 1];
			// console.log(currPage)
			getDetail(currPage.options.product_id)
		}, 20)
	})
	//#endif

	let onClick = () => {}
	let buttonClick = () => {}

	let options = [{
		icon: 'chat',
		text: '客服'
	}, {
		icon: 'shop',
		text: '店铺',
		info: 2,
		infoBackgroundColor: '#007aff',
		infoColor: "#f5f5f5"
	}, {
		icon: 'cart',
		text: '购物车',
		info: 2
	}]

	let buttonGroup = [{
			text: '加入购物车',
			backgroundColor: 'linear-gradient(90deg, #FFCD1E, #FF8A18)',
			color: '#fff'
		},
		{
			text: '立即购买',
			backgroundColor: 'linear-gradient(90deg, #FE6035, #EF1224)',
			color: '#fff'
		}
	]

	let cover = 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg'
	let avatar = 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png'
	let extraIcon = {
		color: '#4cd964',
		size: '22',
		type: 'gear-filled'
	}
</script>

<style lang="scss" scoped>
	.img {
		width: 750rpx;
		height: calc(100vh/3);
		// background: red;

		.imglist {
			width: 750rpx;
			height: 100%;
		}
	}

	.productInfo {
		box-sizing: border-box;
		padding: 0 60rpx;
		height: 200px;
		width: 750rpx;
		border: 1px solid #ccc;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.price {
			font-size: 24px;
			flex: 1;
			margin-right: 300rpx;
			color: red;
		}

		.inventory {
			font-size: 12px;
			flex: 1
		}
	}

	.desc {
		padding: 0 60rpx;
		font-size: 22px;
	}

	.example-body {
		padding: 0;
		/* #ifndef APP-NVUE */
		display: block;
		/* #endif */
	}

	.goods-carts {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		position: fixed;
		left: 0;
		right: 0;
		/* #ifdef H5 */
		// left: var(--window-left);
		// right: var(--window-right);
		/* #endif */
		bottom: 20px;
	}
</style>